/**
 * React.memo()
 *
 *    是什么：一个高阶组件，可以用于函数组件，让函数组件有缓存。
 *
 *    作用：类似于类组件中使用 PureComponent 操作
 */

import { useState, memo } from "react";

// 没有处理 memo 的 Hello
// function Hello() {
//   console.log("Hello Render");
//   return (
//     <div>
//       <h4>Hello</h4>
//     </div>
//   );
// }

// 处理了 memo 的 Hello
const Hello = memo(function Hello() {
  console.log("Hello Render");
  return (
    <div>
      <h4>Hello</h4>
    </div>
  );
});

function App() {
  console.log("App Render");
  const [firstName, setFirstName] = useState("张");
  const [lastName, setLastName] = useState("三");

  return (
    <div>
      <h1>App</h1>
      <button onClick={() => setFirstName("李")}>{firstName}</button>
      <button onClick={() => setLastName("四")}>{lastName}</button>
      <hr />
      <Hello a={firstName} />
    </div>
  );
}

export default App;
